<template>
  <div class="system-role-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="40%" @close="closeDialog" :close-on-click-modal="false">
      <el-form ref="dialogFormRef" :model="state.formItem.addItem" :rules="state.rules" size="default" label-width="100px"
        v-loading="state.dataLoading" label-position="right" style="width: 90%;text-align: center;">
        <el-form-item label="任务名称" prop="task_name">
          <el-input v-model="state.formItem.addItem.task_name" placeholder="请输入指标名称" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="指标名称" prop="name">
          <el-input v-model="state.formItem.addItem.name" placeholder="请输入指标名称" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="参考信源" prop="refer">
          <el-input v-model="state.formItem.addItem.refer" placeholder="请输入参考信源" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="信源类型" prop="refer_type">
          <el-select v-model="state.formItem.addItem.refer_type" placeholder="请选择信源等级">
            <el-option label="官网/政府" value="1"></el-option>
            <el-option label="权威媒体" value="2"></el-option>
            <el-option label="其他可信信源" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" :prop="'dynamicItem.' + index+ '.name'" v-for="(item, index) in state.formItem.dynamicItem" :key="index">
          <el-input v-model="item.name" placeholder="请输入标题" clearable style="width: 30%;" :disabled="true"></el-input>
          <div style="width: 10%;">内容:</div>
          <el-input v-model="item.value" placeholder="请输入标题对应的值" clearable style="width: 60%;" :disabled="true"></el-input>
        </el-form-item>
        <el-divider><span style="color: #F56C6C;">用户需填写区域</span></el-divider>
        <el-form-item label="标题" :prop="'userFilled.' + index+ '.name'" v-for="(item, index) in state.formItem.userFilled" :key="index">
          <el-input v-model="item.name" placeholder="请输入标题" clearable style="width: 30%;" :disabled="true"></el-input>
          <div style="width: 10%;"><span style="color: red;" v-if="item.radio==1">*</span>内容:</div>
          <el-input v-model="item.value" placeholder="请填写内容" style="width: 60%;" required></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="state.formItem.addItem.remark" placeholder="请输入备注" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户截图" prop="remark">
          <div class="demo-image__preview" v-for='item in state.srcList' style="margin:10px">
            <el-image  style="width: 150px; height: 150px" :preview-src-list="state.srcList" :src="item"></el-image>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog()" size="default">取 消</el-button>
          <el-button type="primary" :loading="state.btnLoading" @click="onSubmit(dialogFormRef)"
            size="default">修改用户填写的内容</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="systemRoleDialog">
import { claimTasksApi } from '/@/api/claimTasks'
import { ElMessage } from 'element-plus';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const router = useRouter();
const state = reactive({
  url: '',
  srcList: [
  ],
  userId: null,
  index:0,
  userIndex:0,
  apiData: {
		id:'',
	},
  rules: {
    refer_type: [{ required: true, message: '请输入选择信源类型', trigger: 'blur' }],
  },
  dialog: {
    isShowDialog: false,
    title: '',
    submitTxt: '',
  },
  dataLoading: false,
  btnLoading: false,
  // 填写内容及自定义文本框
  formItem: {
        addItem:{
          refer_type:'',
          id:'',
        },
        dynamicItem: [
        //默认显示一条
          // {
          //   name: '',
          //   value:''
          // }
        ],
        userFilled: [
        //默认显示一条
          // {
          //   name: '',
          //   radio:'1',
          // }
        ]
  }
});

// 打开弹窗
const openDialog = (data) => {
  state.dialog.isShowDialog = true;
  state.dialog.title = '指标详情';
  state.apiData.id = data.id;
  state.formItem.addItem.norm_receive_id = data.id;
  // 清空数据
  
  claimTasksApi().normReceivesDetail(state.apiData).then(res => {
		let addItem = res.data.addItem;
    let userFilled = res.data.userFilled;
    let adminFilled = res.data.adminFilled;
    // 数据详情
    state.formItem.addItem.task_id = addItem.task_id;
    state.formItem.addItem.norm_id = addItem.norm_id;
    state.formItem.addItem.norm_list_id = addItem.id;
    state.formItem.addItem.name = addItem.name;
    state.formItem.addItem.task_name = addItem.task_name;
    state.formItem.addItem.refer = addItem.refer;
    
    if(res.data.normCollectInfo)
    {
      let normCollectInfo = res.data.normCollectInfo;
      state.formItem.addItem.refer_type = normCollectInfo.refer_type;
      state.formItem.addItem.remark = normCollectInfo.remark;
      // state.url = normCollectInfo.imgPath;
    }
    if(res.data.normCollectInfo){
      state.srcList =  res.data.normCollectInfo.imgPath.split(',')
    }
    state.userIndex = 0;
    state.index = 0;
    userFilled.forEach(item => {
          state.formItem.userFilled.push({id:item.id,name:item.extend_name,radio:item.required+"",value:item.extend_value});
          state.userIndex++
		});
    adminFilled.forEach(item => {
          state.formItem.dynamicItem.push({id:item.id,name:item.extend_name,value:item.extend_value,});
          state.index++
		});
	}).catch(() => {

	})
};

const onSubmit = () => {
  dialogFormRef.value.validate((valid, fields) => {
    let userFilledInfo = state.formItem.userFilled;
      let apiIndex = 1;
      for(let i=0;i<userFilledInfo.length;i++)
      {
        if (userFilledInfo[0].radio==1) {
            if (userFilledInfo[0].value == "") {
              apiIndex++;
              ElMessage.error('请填写红色星号必填项!');
              break;
            }
        }
      }
      if(apiIndex==1&&valid){
        claimTasksApi().normCollectsAdd(JSON.stringify(state.formItem)).then(res => {
         state.btnLoading = false
         ElMessage.success('操作成功');
         closeDialog();
         emit('refresh'); 
        }).catch(() => {
          state.btnLoading = false
         closeDialog();
         emit('refresh');
        }) 
      }
  })
};

// 关闭弹窗
const closeDialog = () => {
  state.index=0
  state.userIndex=0
  state.formItem.addItem.task_id = '';
  state.formItem.addItem.norm_id = '';
  state.formItem.addItem.norm_list_id = '';
  state.formItem.addItem.name = '';
  state.formItem.addItem.task_name = '';
  state.formItem.addItem.refer = '';
  state.formItem.addItem.refer_type = '';
  state.formItem.addItem.remark = '';
  state.formItem.dynamicItem = [];
  state.formItem.userFilled = [];
  if(state.formItem.addItem.refer_type){
    state.formItem.addItem.refer_type ='';
  }
  if(state.formItem.addItem.remark)
  {
    state.formItem.addItem.remark = '';
  }
  dialogFormRef.value.resetFields();
  state.dialog.isShowDialog = false;
};

// 暴露变量
defineExpose({
  openDialog,
});


onMounted(() => {
  if(router.currentRoute.value.query.task_id){
		state.formItem.addItem.task_id = router.currentRoute.value.query.task_id
	}

});
</script>

<style scoped lang="scss">
.el-dialog__body {
 
  display: flex;

  justify-content: center;

  align-content: center;

}
</style>
